<template>
  <view class="container">

    <!-- 头部 -->
    <view class="header">
      <button class="apply-btn" @click="showApplyForm">申请请假</button>
    </view>

    <!-- 统计卡片 -->
    <view class="stats-section">
      <view class="stats-card">
        <view class="stats-item">
          <text class="stats-number">{{ leaveStats.pending }}</text>
          <text class="stats-label">待审批</text>
        </view>
        <view class="stats-item">
          <text class="stats-number">{{ leaveStats.approved }}</text>
          <text class="stats-label">已通过</text>
        </view>
        <view class="stats-item">
          <text class="stats-number">{{ leaveStats.rejected }}</text>
          <text class="stats-label">已拒绝</text>
        </view>
        <view class="stats-item">
          <text class="stats-number">{{ leaveStats.total }}</text>
          <text class="stats-label">总申请</text>
        </view>
      </view>
    </view>

    <!-- 请假记录 -->
    <view class="records-section">
      <view class="section-header">
        <text class="section-title">请假记录</text>
        <view class="filter-tabs">
          <text 
            class="filter-tab" 
            :class="{ active: currentFilter === 'all' }"
            @click="setFilter('all')"
          >
            全部
          </text>
          <text 
            class="filter-tab" 
            :class="{ active: currentFilter === 'pending' }"
            @click="setFilter('pending')"
          >
            待审批
          </text>
          <text 
            class="filter-tab" 
            :class="{ active: currentFilter === 'approved' }"
            @click="setFilter('approved')"
          >
            已通过
          </text>
          <text 
            class="filter-tab" 
            :class="{ active: currentFilter === 'rejected' }"
            @click="setFilter('rejected')"
          >
            已拒绝
          </text>
        </view>
      </view>

      <view class="records-list">
        <view 
          class="record-item" 
          v-for="record in filteredRecords" 
          :key="record.id"
          @click="showRecordDetail(record)"
        >
          <view class="record-header">
            <view class="record-type">
              <image :src="getTypeIcon(record.type)" class="type-icon" />
              <text class="type-text">{{ record.typeText }}</text>
            </view>
            <view class="record-status" :class="record.status">
              <text class="status-text">{{ record.statusText }}</text>
            </view>
          </view>
          <view class="record-content">
            <view class="record-info">
              <text class="record-dates">{{ record.startDate }} 至 {{ record.endDate }}</text>
              <text class="record-duration">{{ record.duration }}天</text>
            </view>
            <text class="record-reason">{{ record.reason }}</text>
          </view>
          <view class="record-footer">
            <text class="record-time">申请时间：{{ record.applyTime }}</text>
            <text class="record-approver" v-if="record.approver">
              审批人：{{ record.approver }}
            </text>
          </view>
        </view>
        <view v-if="filteredRecords.length === 0" class="empty-tip">
          暂无请假记录
        </view>
      </view>
    </view>

    <!-- 请假申请弹窗 -->
    <view class="modal" v-if="showApplyModal" @click="closeApplyForm">
      <view class="modal-content apply-modal" @click.stop>
        <view class="modal-header">
          <text class="modal-title">请假申请</text>
          <view class="close-btn" @click="closeApplyForm">
            <text class="close-icon">×</text>
          </view>
        </view>
        <scroll-view class="apply-form" scroll-y>
          <view class="form-section">
            <text class="section-title">请假类型</text>
            <view class="type-grid">
              <view 
                class="type-item" 
                :class="{ active: newLeave.type === item.value }"
                v-for="item in leaveTypes" 
                :key="item.value"
                @click="selectType(item.value)"
              >
                <image :src="item.icon" class="type-item-icon" />
                <text class="type-item-label">{{ item.label }}</text>
              </view>
            </view>
          </view>

          <view class="form-section">
            <text class="section-title">请假时间</text>
            <view class="date-group">
              <view class="date-item">
                <text class="date-label">开始时间</text>
                <picker 
                  mode="date" 
                  :value="newLeave.startDate" 
                  @change="onStartDateChange"
                >
                  <view class="date-picker">
                    <text class="date-text">{{ newLeave.startDate || '请选择开始日期' }}</text>
                    <image src="/static/arrow-right.png" class="date-arrow" />
                  </view>
                </picker>
              </view>
              <view class="date-item">
                <text class="date-label">结束时间</text>
                <picker 
                  mode="date" 
                  :value="newLeave.endDate" 
                  @change="onEndDateChange"
                >
                  <view class="date-picker">
                    <text class="date-text">{{ newLeave.endDate || '请选择结束日期' }}</text>
                    <image src="/static/arrow-right.png" class="date-arrow" />
                  </view>
                </picker>
              </view>
            </view>
            <view class="duration-display" v-if="newLeave.duration > 0">
              <text class="duration-text">请假天数：{{ newLeave.duration }}天</text>
            </view>
          </view>

          <view class="form-section">
            <text class="section-title">请假原因</text>
            <textarea 
              class="reason-textarea" 
              v-model="newLeave.reason" 
              placeholder="请详细说明请假原因..."
              maxlength="200"
            />
            <text class="char-count">{{ newLeave.reason.length }}/200</text>
          </view>

          <view class="form-section">
            <text class="section-title">紧急联系人</text>
            <input 
              class="contact-input" 
              v-model="newLeave.emergencyContact" 
              placeholder="请输入紧急联系人姓名和电话"
            />
          </view>

          <view class="form-section">
            <text class="section-title">附件上传（可选）</text>
            <view class="upload-section">
              <view class="upload-list">
                <view 
                  class="upload-item" 
                  v-for="(file, index) in newLeave.attachments" 
                  :key="index"
                >
                  <image :src="file.url" class="upload-preview" />
                  <view class="upload-delete" @click="deleteAttachment(index)">
                    <text class="delete-icon">×</text>
                  </view>
                </view>
                <view class="upload-btn" @click="chooseFile" v-if="newLeave.attachments.length < 3">
                  <image src="/static/scan-icon.png" class="upload-icon" />
                  <text class="upload-text">添加附件</text>
                </view>
              </view>
              <text class="upload-tip">最多上传3个附件</text>
            </view>
          </view>
        </scroll-view>
        <view class="modal-footer">
          <button class="cancel-btn" @click="closeApplyForm">取消</button>
          <button class="submit-btn" @click="submitLeave" :disabled="!canSubmit">
            提交申请
          </button>
        </view>
      </view>
    </view>

    <!-- 请假详情弹窗 -->
    <view class="modal" v-if="showDetailModal" @click="closeRecordDetail">
      <view class="modal-content detail-modal" @click.stop>
        <view class="modal-header">
          <text class="modal-title">请假详情</text>
          <view class="close-btn" @click="closeRecordDetail">
            <text class="close-icon">×</text>
          </view>
        </view>
        <view class="detail-content" v-if="selectedRecord">
          <view class="detail-section">
            <text class="detail-label">请假类型</text>
            <view class="detail-value">
              <image :src="getTypeIcon(selectedRecord.type)" class="detail-icon" />
              <text class="detail-text">{{ selectedRecord.typeText }}</text>
            </view>
          </view>
          <view class="detail-section">
            <text class="detail-label">请假时间</text>
            <text class="detail-text">{{ selectedRecord.startDate }} 至 {{ selectedRecord.endDate }}</text>
            <text class="detail-duration">共{{ selectedRecord.duration }}天</text>
          </view>
          <view class="detail-section">
            <text class="detail-label">请假原因</text>
            <text class="detail-text">{{ selectedRecord.reason }}</text>
          </view>
          <view class="detail-section" v-if="selectedRecord.emergencyContact">
            <text class="detail-label">紧急联系人</text>
            <text class="detail-text">{{ selectedRecord.emergencyContact }}</text>
          </view>
          <view class="detail-section">
            <text class="detail-label">申请时间</text>
            <text class="detail-text">{{ selectedRecord.applyTime }}</text>
          </view>
          <view class="detail-section" v-if="selectedRecord.approver">
            <text class="detail-label">审批人</text>
            <text class="detail-text">{{ selectedRecord.approver }}</text>
          </view>
          <view class="detail-section" v-if="selectedRecord.approveTime">
            <text class="detail-label">审批时间</text>
            <text class="detail-text">{{ selectedRecord.approveTime }}</text>
          </view>
          <view class="detail-section" v-if="selectedRecord.comment">
            <text class="detail-label">审批意见</text>
            <text class="detail-text">{{ selectedRecord.comment }}</text>
          </view>
          <view class="detail-section" v-if="selectedRecord.attachments && selectedRecord.attachments.length">
            <text class="detail-label">附件</text>
            <view class="detail-attachments">
              <image 
                :src="file.url" 
                class="detail-attachment" 
                v-for="file in selectedRecord.attachments" 
                :key="file.url"
                @click="previewImage(file.url)"
              />
            </view>
          </view>
        </view>
        <view class="detail-actions" v-if="selectedRecord.status === 'pending'">
          <button class="cancel-leave-btn" @click="cancelLeave(selectedRecord)">取消申请</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 请假类型
const leaveTypes = [
  { value: 'sick', label: '病假', icon: '/static/leave.png' },
  { value: 'annual', label: '年假', icon: '/static/leave.png' },
  { value: 'personal', label: '事假', icon: '/static/leave.png' },
  { value: 'maternity', label: '产假', icon: '/static/leave.png' },
  { value: 'marriage', label: '婚假', icon: '/static/leave.png' },
  { value: 'bereavement', label: '丧假', icon: '/static/leave.png' }
]

// 请假记录数据
const leaveRecords = ref([
  {
    id: 1,
    type: 'sick',
    typeText: '病假',
    startDate: '2024-01-15',
    endDate: '2024-01-17',
    duration: 3,
    reason: '感冒发烧，需要休息调养',
    emergencyContact: '李四 13800138002',
    status: 'approved',
    statusText: '已通过',
    applyTime: '2024-01-14 09:30',
    approver: '张三',
    approveTime: '2024-01-14 14:20',
    comment: '同意，注意休息',
    attachments: []
  },
  {
    id: 2,
    type: 'annual',
    typeText: '年假',
    startDate: '2024-01-20',
    endDate: '2024-01-22',
    duration: 3,
    reason: '回家处理个人事务',
    emergencyContact: '王五 13800138003',
    status: 'pending',
    statusText: '待审批',
    applyTime: '2024-01-18 16:45',
    approver: '',
    approveTime: '',
    comment: '',
    attachments: []
  },
  {
    id: 3,
    type: 'personal',
    typeText: '事假',
    startDate: '2024-01-10',
    endDate: '2024-01-10',
    duration: 1,
    reason: '参加朋友婚礼',
    emergencyContact: '赵六 13800138004',
    status: 'rejected',
    statusText: '已拒绝',
    applyTime: '2024-01-09 10:15',
    approver: '张三',
    approveTime: '2024-01-09 15:30',
    comment: '工作繁忙，暂不同意',
    attachments: []
  }
])

// 计算属性
const leaveStats = computed(() => {
  const stats = {
    pending: 0,
    approved: 0,
    rejected: 0,
    total: leaveRecords.value.length
  }
  
  leaveRecords.value.forEach(record => {
    switch (record.status) {
      case 'pending':
        stats.pending++
        break
      case 'approved':
        stats.approved++
        break
      case 'rejected':
        stats.rejected++
        break
    }
  })
  
  return stats
})

const filteredRecords = computed(() => {
  if (currentFilter.value === 'all') {
    return leaveRecords.value
  }
  return leaveRecords.value.filter(record => record.status === currentFilter.value)
})

const canSubmit = computed(() => {
  return newLeave.value.type && 
         newLeave.value.startDate && 
         newLeave.value.endDate && 
         newLeave.value.reason.trim() &&
         newLeave.value.duration > 0
})

// 方法
const goBack = () => {
  uni.navigateBack()
}

const setFilter = (filter) => {
  currentFilter.value = filter
}

const getTypeIcon = (type) => {
  const typeItem = leaveTypes.find(item => item.value === type)
  return typeItem ? typeItem.icon : '/static/leave.png'
}

const showApplyForm = () => {
  showApplyModal.value = true
  resetNewLeave()
}

const closeApplyForm = () => {
  showApplyModal.value = false
  resetNewLeave()
}

const resetNewLeave = () => {
  newLeave.value = {
    type: '',
    startDate: '',
    endDate: '',
    duration: 0,
    reason: '',
    emergencyContact: '',
    attachments: []
  }
}

const selectType = (type) => {
  newLeave.value.type = type
}

const onStartDateChange = (e) => {
  newLeave.value.startDate = e.detail.value
  calculateDuration()
}

const onEndDateChange = (e) => {
  newLeave.value.endDate = e.detail.value
  calculateDuration()
}

const calculateDuration = () => {
  if (newLeave.value.startDate && newLeave.value.endDate) {
    const start = new Date(newLeave.value.startDate)
    const end = new Date(newLeave.value.endDate)
    if (end < start) {
      uni.showToast({ title: '结束日期不能早于开始日期', icon: 'none' })
      newLeave.value.duration = 0
      return
    }
    const diffTime = Math.abs(end - start)
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1
    newLeave.value.duration = diffDays
  }
}

const chooseFile = () => {
  uni.chooseImage({
    count: 3 - newLeave.value.attachments.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      res.tempFilePaths.forEach(path => {
        newLeave.value.attachments.push({
          url: path,
          name: 'attachment.jpg'
        })
      })
    }
  })
}

const deleteAttachment = (index) => {
  newLeave.value.attachments.splice(index, 1)
}

const submitLeave = () => {
  if (!canSubmit.value) {
    uni.showToast({ title: '请完善必填信息', icon: 'none' })
    return
  }

  const leaveRecord = {
    id: Date.now(),
    type: newLeave.value.type,
    typeText: leaveTypes.find(t => t.value === newLeave.value.type)?.label,
    startDate: newLeave.value.startDate,
    endDate: newLeave.value.endDate,
    duration: newLeave.value.duration,
    reason: newLeave.value.reason,
    emergencyContact: newLeave.value.emergencyContact,
    status: 'pending',
    statusText: '待审批',
    applyTime: new Date().toLocaleString(),
    approver: '',
    approveTime: '',
    comment: '',
    attachments: [...newLeave.value.attachments]
  }

  leaveRecords.value.unshift(leaveRecord)
  
  uni.showToast({ title: '申请提交成功', icon: 'success' })
  closeApplyForm()
}

const showRecordDetail = (record) => {
  selectedRecord.value = record
  showDetailModal.value = true
}

const closeRecordDetail = () => {
  showDetailModal.value = false
  selectedRecord.value = null
}

const cancelLeave = (record) => {
  uni.showModal({
    title: '确认取消',
    content: '确定要取消这个请假申请吗？',
    success: (res) => {
      if (res.confirm) {
        const index = leaveRecords.value.findIndex(r => r.id === record.id)
        if (index > -1) {
          leaveRecords.value.splice(index, 1)
          uni.showToast({ title: '申请已取消', icon: 'success' })
          closeRecordDetail()
        }
      }
    }
  })
}

const previewImage = (url) => {
  uni.previewImage({
    urls: [url]
  })
}

// 生命周期
onMounted(() => {
  // 页面初始化
})
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

/* 头部 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background: #fff;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.back-text {
  font-size: 28rpx;
  color: #333;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.header-right {
  display: flex;
  align-items: center;
}

.apply-text {
  font-size: 28rpx;
  color: #3D76FF;
}

.apply-btn {
  background: #3D76FF;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  padding: 16rpx 40rpx;
  font-size: 28rpx;
  margin: 20rpx 0;
}

/* 统计卡片 */
.stats-section {
  padding: 20rpx;
}

.stats-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stats-number {
  font-size: 36rpx;
  font-weight: bold;
  color: #3D76FF;
  margin-bottom: 8rpx;
}

.stats-label {
  font-size: 24rpx;
  color: #666;
}

/* 请假记录 */
.records-section {
  background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.section-header {
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.filter-tabs {
  display: flex;
  gap: 20rpx;
}

.filter-tab {
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  font-size: 26rpx;
  color: #666;
  background: #f5f5f5;
}

.filter-tab.active {
  background: #3D76FF;
  color: #fff;
}

.records-list {
  padding: 0 30rpx;
}

.record-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.record-item:last-child {
  border-bottom: none;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.record-type {
  display: flex;
  align-items: center;
}

.type-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}

.type-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.record-status {
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.record-status.pending {
  background: #fff7e6;
  color: #faad14;
}

.record-status.approved {
  background: #f6ffed;
  color: #52c41a;
}

.record-status.rejected {
  background: #fff2f0;
  color: #ff4d4f;
}

.status-text {
  font-size: 24rpx;
}

.record-content {
  margin-bottom: 15rpx;
}

.record-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.record-dates {
  font-size: 26rpx;
  color: #333;
}

.record-duration {
  font-size: 24rpx;
  color: #3D76FF;
  background: #f0f7ff;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}

.record-reason {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.record-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.record-time, .record-approver {
  font-size: 24rpx;
  color: #999;
}

/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  width: 90%;
  max-height: 80%;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.close-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon {
  font-size: 40rpx;
  color: #999;
}

/* 申请表单 */
.apply-modal {
  width: 95%;
  max-width: 600rpx;
}

.apply-form {
  max-height: 600rpx;
  padding: 30rpx;
}

.form-section {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.type-item {
  width: calc(33.33% - 14rpx);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 10rpx;
  border: 2rpx solid #eee;
  border-radius: 12rpx;
  background: #fafafa;
}

.type-item.active {
  border-color: #3D76FF;
  background: #f0f7ff;
}

.type-item-icon {
  width: 40rpx;
  height: 40rpx;
  margin-bottom: 10rpx;
}

.type-item-label {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}

.date-group {
  display: flex;
  gap: 20rpx;
}

.date-item {
  flex: 1;
}

.date-label {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.date-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  background: #fff;
}

.date-text {
  font-size: 28rpx;
  color: #333;
}

.date-arrow {
  width: 24rpx;
  height: 24rpx;
}

.duration-display {
  margin-top: 15rpx;
  text-align: center;
}

.duration-text {
  font-size: 26rpx;
  color: #3D76FF;
  background: #f0f7ff;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
}

.reason-textarea {
  width: 100%;
  height: 200rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  background: #fff;
  resize: none;
}

.char-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.contact-input {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  background: #fff;
}

.upload-section {
  margin-top: 20rpx;
}

.upload-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 10rpx;
}

.upload-item {
  position: relative;
  width: 200rpx;
  height: 200rpx;
}

.upload-preview {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}

.upload-delete {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 40rpx;
  height: 40rpx;
  background: #ff4d4f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-icon {
  color: #fff;
  font-size: 24rpx;
  font-weight: bold;
}

.upload-btn {
  width: 200rpx;
  height: 200rpx;
  border: 2rpx dashed #ddd;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

.upload-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.upload-text {
  font-size: 24rpx;
  color: #999;
}

.upload-tip {
  font-size: 24rpx;
  color: #999;
}

.modal-footer {
  display: flex;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #eee;
  gap: 20rpx;
}

.cancel-btn, .submit-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  border: none;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
}

.submit-btn {
  background: #3D76FF;
  color: #fff;
}

.submit-btn:disabled {
  background: #ccc;
}

/* 详情弹窗 */
.detail-modal {
  width: 90%;
  max-width: 500rpx;
}

.detail-content {
  padding: 30rpx;
}

.detail-section {
  margin-bottom: 25rpx;
}

.detail-label {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 8rpx;
  display: block;
}

.detail-value {
  display: flex;
  align-items: center;
}

.detail-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}

.detail-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

.detail-duration {
  font-size: 24rpx;
  color: #3D76FF;
  background: #f0f7ff;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  margin-top: 8rpx;
  display: inline-block;
}

.detail-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  margin-top: 10rpx;
}

.detail-attachment {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
}

.detail-actions {
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #eee;
}

.cancel-leave-btn {
  width: 100%;
  height: 80rpx;
  background: #ff4d4f;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
}
.empty-tip {
  text-align: center;
  color: #999;
  font-size: 28rpx;
  margin: 60rpx 0;
}

.search-row {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 32rpx;
  padding: 0 20rpx;
  height: 64rpx;
}
</style>